<template>
  <div class="app-container-main">
    <van-nav-bar fixed title="Base">
      <template #right>
        <van-icon name="filter-o" size="18" />
      </template>
    </van-nav-bar>

    <div class="app-container-body">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="request"
        >
          <div v-for="(item, idx) in list" :key="idx" class="item">
            <div class="icon" :class="'icon-' + item.datasourceType" />

            <div class="info">
              <div class="title">{{ item.datasourceName }}</div>

              <div class="desc">{{ item.addr }}</div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>

    <app-container-tabbar active="base" />
  </div>
</template>

<script setup>
  import $api from './api.js'
  import TableFilter from './filter.vue'
  import TableBody from './body.vue'
  import TableEdit from './edit.vue'

  const { proxy } = getCurrentInstance()

  // 组件
  const editDialog = ref(null)
  const editStudentRef = ref(null)

  // data
  const selection = ref([])
  const list = ref([])
  const loading = ref(false)
  const finished = ref(false)
  const refreshing = ref(false)
  const queryData = ref({
    pageNum: 1,
    pageSize: 10,
  })
  const pageTotal = ref(0)

  // 方法
  function load() {
    request()
  }

  function request(v) {
    const sendData = {
      ...queryData.value,
      ...v,
    }
    loading.value = true
    $api
      .list(sendData)
      .then((res) => {
        // list.value = res.rows

        if (refreshing.value) {
          list.value = []
          refreshing.value = false
        }

        // 追加数据
        list.value = list.value.concat(res.rows)

        pageTotal.value = res.total

        // 数据全部加载完成
        if (res.total <= sendData.pageNum * sendData.pageSize) {
          finished.value = true
        }

        // 页数+1
        queryData.value.pageNum++
      })
      .finally(() => {
        loading.value = false
      })
  }

  const onRefresh = () => {
    // 清空列表数据
    finished.value = false

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true

    queryData.value.pageNum = 1
    request()
  }

  function filterChange(d) {
    queryData.value = {
      ...queryData.value,
      ...d,
    }
    queryData.value.pageNum = 1
    request()
  }

  function sortChange(d) {
    queryData.value = {
      ...queryData.value,
      ...d,
    }
    request()
  }

  function add() {
    // 调用子组件的方法
    editDialog.value.load('add')
  }

  function detail(d) {
    // 调用子组件的方法
    editDialog.value.load('detail', d)
  }

  function edit(d) {
    // 调用子组件的方法
    editDialog.value.load('edit', d)
  }

  function del(d) {
    proxy
      .$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        _del(d.id)
      })
  }

  function _del(id) {
    const sendData = {
      id,
    }
    $api.delete(sendData).then((res) => {
      proxy.$message.success('删除成功!')
      load()
    })
  }

  // 生命周期
  onMounted(() => {
    load()
  })
</script>

<style lang="scss" scoped>
  .app-container-main {
    padding: 10px;
    padding-top: 60px;
    padding-bottom: 80px;
  }
  .list {
  }
  .item {
    display: grid;
    padding: 10px;
    grid-template-columns: 60px 1fr;
    gap: 20px;
    border-radius: 8px;
    margin: 4px;
    margin-bottom: 10px;

    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);

    .icon {
      width: 60px;
      height: 60px;

      &.icon-MySQL {
        background: url('../../assets/images/icon-mysql.png') no-repeat;
        background-size: cover;
      }
    }
  }
</style>
